
<template>
  <div ref="echart" style="width:100%;height: 100%;" id="unsumChart"></div>
</template>
  
<script>
import * as echarts from 'echarts'

export default {
   props: {
      columorData:{
        type: Object,
        default: () => {
        return {};
       }
      },
       selectTime: {
         type: String,
         default() {
            return "";
          }
      },
      type:{
        type: String,
         default() {
            return "";
          }
      }
    },
  data() {
    
    return {
      intervals: 1,
      xDatas:[],
      yDatas:[],
      time:'',
      noSubmitCountData:[],
      totalnoSubmitCount:[],
      getDate:[],
      daydata:'',
      daySum:0,
      newArr:[],
      totalSum:[],
      daySums:[],
      newgetDate:[],
      getBusinessdays:[],
      IsMonth:[],
      max:'',
       options:  {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },

      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
       
        {
          type: 'category',
          //boundaryGap: false,   
          //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
           //data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          data: this.xDatas,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            interval: this.intervals,
            show: true
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          scale : true,
          max : this.max,
          min : 0,
          splitNumber : 5,
          //boundaryGap : [ 0.2, 0.2 ],
         

        }
      ],
      series: [
        {
          name: '次数',
          type: 'bar',
          barWidth: '20%',
          //data: [10, 52, 200, 334, 390, 330, 220, 210, 200, 190, 160, 110]
          data:this.yDatas,
        }
      ]
    } 
        }
  },

  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
   
  },

  methods: {
    initChart() {
      this.echart = echarts.init(this.$refs.echart)
      this.options.xAxis[0].data = this.xDatas
      this.options.series[0].data = this.yDatas
      this.options.xAxis[0].axisLabel.interval = this.intervals
      //this.echart.setOption(this.options)
    /*   let  maxs = Math.max(...this.yDatas)
      
      this.max = Number((Math.ceil(maxs / 5)) * 5)
      */
      this.echart.setOption(this.options)
     
      const mychart = document.getElementById("unsumChart")
      window.onresize = mychart.resize
    },
    //去重
    removeDuplicate(arr) {
    return arr.filter((item, index) => {
       return arr.indexOf(item) === index
   })
   },
  
    getBusinessDatas(datas){
    this.getDate = []
    this.newgetDate = []
    //1.获取到day 2.排序、去重、 3.取最后一个数减去第一个数 4.判断是否大于31天（）5，大于取month (小于取最后一个和第一个月份做差，小于1单位取day,大于1单位取month,)
    datas.forEach(days=>{
      this.getBusinessdays.push((days.day))
    })
    //去重
     this.newgetBusinessdays = this.removeDuplicate(this.getBusinessdays)
      let first = new Date(this.newgetBusinessdays[0])
      let last = new Date(this.newgetBusinessdays[this.newgetBusinessdays.length-1])
      //获取差
      let  num = (last-first)/(1000*3600*24);//求出两个时间的时间差，天数
      let  days = parseInt(Math.ceil(num));//转化为整天
      let firstMonth = first.getMonth() + 1
      let lastMonth = last.getMonth() + 1
      let monthDiffer = lastMonth -firstMonth
       if( days <= 31 &&  monthDiffer < 1){
          //遍历datas得到天
          datas.forEach(res=>{
            this.getDate.push(res.day)      
          })
          this.newgetDate = this.removeDuplicate(this.getDate)
       }else{
        datas.forEach(res=>{
            this.getDate.push(res.month)
            
          })
          this.newgetDate = this.removeDuplicate(this.getDate)
       }
      
  },
},
  watch:{
    'selectTime':{
      handler(val){
        this.time = val
        if(this.time !== '02'){
          this.intervals = 0
        }else{
          this.intervals = 1
        }
      }
    },

    //01 周 02月 04全部
    'columorData': {
      handler(val) {  
        this.xDatas = []
        this.yDatas = []
        this.getDate = []
        
        this.daySums=[]
        if(val.trgNode == 'total'){
            this.totalnoSubmitCount = val.submitStatVos
            //遍历获取日期
             this.totalnoSubmitCount.forEach(element=>{
              if(this.time !=='04'){
                 this.getDate.push(element.day) 
              }else{
                //获取到对应的total日期
                this.getBusinessDatas(val.submitStatVos)
                this.getDate = this.newgetDate
              }
             })
              //去重
              this.newArr = this.removeDuplicate(this.getDate)
            //去遍历获取对应的未提交数
               this.newArr.forEach(elements=>{
                if(this.type == 'unsubmitnum'){
               /*   this.daydata = Number(this.totalnoSubmitCount.find(item=> item.day === elements).submitCount)
                  this.daySum.push(this.daydata) */
                  //判断日期中是否有日
                  if( new Date(this.getDate[0]).getDay()){
                     this.daydata = this.totalnoSubmitCount.filter(item=> item.day === elements)
                  }else{
                     this.daydata = this.totalnoSubmitCount.filter(item=> item.month === elements)
                  }
                   this.daySum = 0
                  this.daydata.forEach(res=>{  
                    this.daySum+=Number(res.noSubmitCount)
                  })
                   this.daySums.push(this.daySum)
                }else{
                  if(new Date(this.getDate[0]).getDay()){
                     this.daydata = this.totalnoSubmitCount.filter(item=> item.day === elements)
                  }else{
                     this.daydata = this.totalnoSubmitCount.filter(item=> item.month === elements)
                  }
                  this.daySum = 0
                   //对得到的数据求和
                  this.daydata.forEach(res=>{
                    this.daySum+=Number(res.rejectCount)
                   
                  })
                   this.daySums.push(this.daySum)
                 
                }  
            })
            this.xDatas = this.newArr
            this.yDatas = this.daySums
             this.$nextTick(()=> {
              this.initChart()
            })
        }else{
         this.noSubmitCountData = val.submitStatVos
          //this.getBusinessDatas(val.submitStatVos)
          this.noSubmitCountData.forEach(element => {
            if( this.time !=='04'){
                 this.xDatas.push(element.day)
               this.type=='unsubmitnum' ? this.yDatas.push(Number(element.noSubmitCount)):this.yDatas.push(Number(element.rejectCount))
            }else{
              //选中业务单元为全部
              this.getBusinessDatas(val.submitStatVos)
              this.xDatas = this.newgetDate
              this.type=='unsubmitnum' ? this.yDatas.push(Number(element.noSubmitCount)):this.yDatas.push(Number(element.rejectCount))
            }
              
            
            
        });
        let  maxs = Math.max(...this.yDatas)
        this.max = Number((Math.ceil(maxs / 5)) * 5)
        this.$nextTick(()=> {
            this.initChart()
          })
        }
      },
      // immediate: true
    }
  }
}
</script>
